<template>
  <!-- <div class="a-flex a-row-center a-col-center h430" v-if="$isEmpty(data.ThisMonthRfy)">
    <a-empty>
      <template #description>
        <p class="title">{{ options.title.text }}</p>
        <p class="text-secondary">暂无数据</p>
      </template>
    </a-empty>
  </div> -->
  <echartsView :loading="loading" :options="options" class="h430"></echartsView>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView,
  },
  props: {
    data: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(n) {
        if (!this.$isEmpty(n)) {
          this.setOptions()
        }
      },
    },
  },
  data() {
    return {
      loading: false,
      options: {
        title: {
          text: '在保数据统计',
          // x: 'center',
        },
        tooltip: {
          trigger: 'item',
          left: 0,
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        legend: {
          // data: ['配租公租房', '退租总数', '发放租凭补贴户数'],
          data: [],
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data:[],
            // prettier-ignore
            // data: ['一季度','二季度','三季度','四季度'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          // {
          //   name: 'Rainfall',
          //   type: 'bar',
          //   data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          //   markPoint: {
          //     data: [
          //       { type: 'max', name: 'Max' },
          //       { type: 'min', name: 'Min' },
          //     ],
          //   },
          //   markLine: {
          //     data: [{ type: 'average', name: 'Avg' }],
          //   },
          // },
          // {
          //   name: 'Evaporation',
          //   type: 'bar',
          //   data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          //   markPoint: {
          //     data: [
          //       { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
          //       { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 },
          //     ],
          //   },
          //   markLine: {
          //     data: [{ type: 'average', name: 'Avg' }],
          //   },
          // },
        ],
      },
    }
  },
  methods: {
    setOptions() {
      this.options.legend = {
        data: [],
      }
      if (this.data.num == 3) {
        // this.options.xAxis[0].data.push(this.data.num)
        this.options.xAxis[0].data = ['一季度', '二季度', '三季度']
      } else if (this.data.num == 4) {
        this.options.xAxis[0].data = ['一季度', '二季度', '三季度', '四季度']
      } else if (this.data.num == 2) {
        this.options.xAxis[0].data = ['一季度', '二季度']
      } else if (this.data.num == 1) {
        this.options.xAxis[0].data = ['一季度']
      }
      for (const item of this.data.List) {
        this.options.legend.data.push(item.Name)
        if (this.data.num == 3) {
          this.options.series.push({
            name: item.Name,
            type: 'bar',
            barWidth: '30',
            data: [item.num1, item.num2, item.num3],
            label: {
              show: true,
              position: 'top',
            },
          })
        } else if (this.data.num == 4) {
          this.options.series.push({
            name: item.Name,
            type: 'bar',
            barWidth: '30',
            // data: [item.num1, item.num2, item.num3, item.num4 != 0 ? item.num4:],
            data: [item.num1, item.num2, item.num3, item.num4],
            label: {
              show: true,
              position: 'top',
            },
          })
        } else if (this.data.num == 2) {
          this.options.series.push({
            name: item.Name,
            type: 'bar',
            barWidth: '30',
            // data: [item.num1, item.num2, item.num3, item.num4 != 0 ? item.num4:],
            data: [item.num1, item.num2],
            label: {
              show: true,
              position: 'top',
            },
          })
        } else if (this.data.num == 1) {
          this.options.series.push({
            name: item.Name,
            type: 'bar',
            barWidth: '30',
            // data: [item.num1, item.num2, item.num3, item.num4 != 0 ? item.num4:],
            data: [item.num1],
            label: {
              show: true,
              position: 'top',
            },
          })
        }
      }
      this.loading = false
    },
  },
}
</script>
<style lang="less" scoped>
.title {
  font-weight: 700;
  font-size: 20px;
}
.h430 {
  height: 300px !important;
}
</style>
